<html lang="en" xml:lang="en"><head>
<META http-equiv="Content-Type" content="text/html">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><META name="description" content="CSS classes"><meta name="content-language" content="en"><link href="rsrc/htmlhelp.css" rel="stylesheet" type="text/css"><title>Web AppBuilder for ArcGIS | Help - 
CSS framework
</title>
                <script type="text/javascript" language="JavaScript">
                    var pathL  = self.location.pathname.split ("/");
                    var fname = pathL[pathL.length-1];
                    var i = fname.lastIndexOf (".htm");
                    if (i>=0) {
                    fname = fname.substring (0, i)
                    } else {
                    //??
                    }
                    if (self.location.hash) {
				    		      fname = fname + self.location.hash;
						        }
                    self.location.replace ("../index.html#//" + fname);
                </script>
                </head><!--Publication GUID: [GUID-E7D1C130-8F87-4109-8D61-E73A46083F52]--><!--Topic GUID: [GUID-57BA3D39-6CBC-4BB2-9AD4-0BAC57A35A98]--><body><div id="content"><div class="header"><h1>
CSS framework
</h1><div id="breadcrumb"></div></div>
<p id="GUID-DE95F09E-F8E2-4A63-BA1F-1C8423EE44BF"> The CSS classes provided by Web AppBuilder are listed below. These classes are designed to create visual consistency
across the app and allow the app to be themeable. They are classified in four categories: main,
widget and panel, state, and icon. You can find them in the <span class="usertext">jimu.js/css/jimu-theme.css</span> file.</p>
<div class="notes" id="GUID-960BE3A5-00A1-4574-A5B2-9B0BCFF07B11"><div class="note"><img class="note_img" src="rsrc/note.png" alt="Note" title="Note"><span>Note:</span></div><div class="tipbody"><p id="GUID-EDB941A2-0C63-4CA1-8F35-78F048C8C2E8">You may notice that these CSS classes have not yet  applied to all of  the widgets and themes in this release. Code refactoring will continue in the coming releases. </p></div></div>


<div class="section1" id="ESRI_SECTION1_2AE4EF7C35DB461EAE6DF29479FFE523" purpose="section1"><h2>Main classes</h2><p id="GUID-7B2EB3CB-7DAD-4A81-9C7A-355E58AD626F"> Main classes have  an impact on the  overall look and feel of the app.</p><div class="block_table" id="TABLE_3C791B29D3CB4F7AB29B217D117A6C39" purpose="block_table"><span class="table_title"></span><table class="table"><colgroup width="*"></colgroup><colgroup width="*"></colgroup><tbody><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-F4C69574-9D2C-4D8B-A92F-FEBD0C7CE225">Class name</p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-A7ED485A-E8C4-45A4-972C-F6651FADC06A">Description</p></td></tr><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-5FD987DC-72F4-4942-8CF1-405DED2AB902"><span class="usertext"> jimu-main-background</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-42E5F2B2-424F-43D0-AC0C-8848122F46ED">  Defines the main color of the  app. Applies to the main UI   of the app.</p></td></tr><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-2CA456A9-826E-4687-A1C6-670A329B091C"><span class="usertext"> jimu-main-font</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-2EE9054C-591E-41E8-B01F-2E5672EA60D3">Applies to the body tag. If you do not want to override the default font, ignore it.</p></td></tr><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-FA12B1EA-7547-4A8C-9151-2639E61EDD62"><span class="usertext"> jimu-title</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-B831B256-0CEE-4F86-8F99-8DA4EA49D8A0">Defines the font size and color. Applies  to the element that displays the  app's title. </p></td></tr><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-4BC52016-D99D-480C-B84A-2203AAF6072D"><span class="usertext">  jimu-subtitle</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-E539F4A0-2C46-41F5-923E-452072817BD2">Defines the font size and color. Applies to the element that displays the app's subtitle.</p></td></tr><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-F547C7EF-6288-4A8A-9C5B-D30FC2D94A5D"><span class="usertext">  jimu-footer</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-4993CD4C-463D-4CE3-9583-88A672BBAD4A">Defines the font size and color. Applies to the element that displays the app's footer. </p></td></tr><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-B993F684-5B58-45DC-9839-6937158987E0"><span class="usertext"> jimu-link</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-9709D0A8-5BB6-4052-B3BD-1077403B4B37">Defines the font size and color. Applies to the element that displays the app's link. </p></td></tr><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-A007273E-692F-460C-B902-FDDADD690D8E"><span class="usertext">  jimu-widget-onscreen-icon</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-0EE3E79E-8DF2-48DB-9EBB-2A792295BAB4"> Defines the background color and border. Applies  to the icon element of the on-screen widget.</p></td></tr><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-04B15343-35BA-4089-B394-E7B279DE5D99"><span class="usertext"> jimu-widget-placeholder</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-081EC6D4-64E7-4845-92CE-3760EFF3501D">Defines the background color and border. Applies to   the on-screen placeholder.</p></td></tr><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-5E4CDC40-01F1-44D9-B4A6-8A0351833F36"><span class="usertext">  jimu-overlay</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-EF9616CB-B98C-411D-A336-7DB491EF194A">Applies to  the overlay element.</p></td></tr></tbody></table><span class="table_desc"></span></div></div><div class="section1" id="ESRI_SECTION1_191EA11FAF354540B72F34A10B9ED6DD" purpose="section1"><h2> Widget and panel classes</h2><p id="GUID-74C994DC-224D-4006-A2E8-C76954F83897"> Widget and panel classes have an impact on the look and feel of the widget and panel.</p><div class="block_table" id="TABLE_E8029E756EF94A54BA78C8DB495A035E" purpose="block_table"><span class="table_title"></span><table class="table"><colgroup width="*"></colgroup><colgroup width="*"></colgroup><tbody><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-DA5F8ED1-5A1F-4865-992A-A1367579BECD">Class name</p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-1D23ED3F-D9C8-4CDB-AE1C-ED9ACC3F4FD4">Description</p></td></tr><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-CBA3B4BF-8324-4EE9-91C4-23EB2D70459C"><span class="usertext"> jimu-widget</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-BD11E29F-1FC5-43D9-AFB6-9BECD14EB7EC"> Defines the font size and color. Applies to the outer container of the  widget. </p></td></tr><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-D931CE20-98EC-47F3-A477-BBEDF21D8D62"><span class="usertext">  jimu-widget-title</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-3E1A22B0-E854-4E1B-8353-FB7785A94069">  Defines the font size and color. Applies to the element that displays the widget's title.</p></td></tr><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-6E63007D-ABA1-4AC9-A693-5CE1CAE31C5F"><span class="usertext">  jimu-widget-note</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-194277A7-FF23-41B7-B3FB-3A3433932CCD">Defines the font size and color. Applies  to the element that displays the note text. </p></td></tr><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-051CB8E0-CD13-456F-BF71-FFBF7F6052C0"><span class="usertext"> jimu-panel</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-15449367-2DC5-4C6E-A093-9D2EA9D659D9">  Defines the background and border. Applies to the outer container of the panel.</p></td></tr><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-E3C2EB44-3101-48C1-B2DC-BDE1BEDC6AED"><span class="usertext"> jimu-panel-title</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-487D6DB7-CEF8-4D33-88D4-1FBDB995165E">Defines the  font size and color. Applies to the element that displays the panel's title. </p></td></tr></tbody></table><span class="table_desc"></span></div></div><div class="section1" id="ESRI_SECTION1_93D92B0B44884EB19DF2312325762A7A" purpose="section1"><h2>State classes</h2><p id="GUID-FF4192C8-43FE-4E1D-BF43-C5C8716E4A98"> State classes are designed for consistency. They don't have any CSS rules. </p><div class="block_table" id="TABLE_436AE33E64124E94B6486B23A24BBF4D" purpose="block_table"><span class="table_title"></span><table class="table"><colgroup width="*"></colgroup><colgroup width="*"></colgroup><tbody><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-F8E4D817-8258-4B92-94E4-8EBD33755D04">Class name</p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-CD3749BA-8735-4AF9-A7DA-634B58659933">Description</p></td></tr><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-BA9F038F-E22C-4B5F-BE4F-828BFC1F4D71"><span class="usertext">  jimu-state-hover</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-23637C5A-6031-4F7D-B044-7CBC49BAB724"> Applies to the element  when the mouse hovers over it.</p></td></tr><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-DF4DD2D0-B69F-451B-9C06-3DE5695C9C18"><span class="usertext">  jimu-state-focus</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-531747FE-A051-4AAD-AEC9-280DF22DA052"> Applies to the element that gets the focus.</p></td></tr><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-6852F0C0-2BD3-443B-9BCA-D4B477DDF2C1"><span class="usertext">  jimu-state-active</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-DED8AC80-44FE-4EF5-85E0-792F4BE0BD60"> Applies to the element that is currently selected.</p></td></tr><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-7CF1F99A-90CA-4D24-8F69-42295A13239E"><span class="usertext">  jimu-state-disabled</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-DDEE2600-E8F7-49B4-AA1E-3912A890243A"> Applies to the element that is disabled.</p></td></tr><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-96F0ED6E-E1F8-40F0-A115-AD90606E8F9B"><span class="usertext">  jimu-state-error</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-F9CA2E51-284F-4CC0-8BD1-E1E46CA29CE9"> Applies to the element that shows the  error message.</p></td></tr></tbody></table><span class="table_desc"></span></div></div><div class="section1" id="ESRI_SECTION1_6C4F8EC8A62E43D3AF57A5FE473FDB5C" purpose="section1"><h2>Icon classes</h2><p id="GUID-104DEE83-7DE2-48B7-B6CD-DC7523D3131A"> An image sprite in the <span class="usertext">jimu.js/css/sprite.png</span> file contains many icons. To use them, apply  a 
jimu-icon class, a state class, and an icon name class to
the  element. The icon name class follows the  pattern of <span class="uicontrol">jimu-icon-&lt;icon name&gt;</span>. The full list of icon names
is available in the <span class="usertext">jimu.js/css/sprite.css</span> file. The following code demonstrates how to apply the add icon and  the state-hover icon:</p><div class="codeblock" purpose="codeblock"><div class="highlight"><pre><code>&lt;div class=&quot;jimu-icon jimu-icon-add&quot;&gt;&lt;/div&gt;
</code></pre></div>
</div><div class="codeblock" purpose="codeblock"><div class="highlight"><pre><code>&lt;div class=&quot;jimu-icon jimu-icon-add
jimu-state-hover&quot;&gt;&lt;/div&gt;
</code></pre></div>
</div><div class="block_table" id="TABLE_4368376788CF4B53AFE380BDCA8C8E61" purpose="block_table"><span class="table_title"></span><table class="table"><colgroup width="*"></colgroup><colgroup width="*"></colgroup><tbody><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-34FEB1D5-B612-4313-A203-4724D4B0CC7A">Class name</p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-F17BCE1A-7105-4F23-AA0C-CC73CF16D304">Description</p></td></tr><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-B066FA50-8907-4F40-9BBE-24FC757B8895"><span class="usertext"> jimu-icon</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-9C5A7A81-CDBB-44A0-8EDE-4F7E43C07999"> The base class applies to an icon element.</p></td></tr></tbody></table><span class="table_desc"></span></div></div><div class="footer"> Copyright © 1995-2016 Esri. All rights reserved. </div></div></body></html>